import React from "react";

import Chart from "react-apexcharts";

import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline";
import ArrowDropUpIcon from "@material-ui/icons/ArrowDropUp";
import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
import Card from "@material-ui/core/Card";
import { Typography } from "@material-ui/core";

const CrptoWatchBox = (props: any) => {
  const {
    ethChartOptions,
    ethChartData,
    cryptoName,
    cryptoSymbol,
    cryptoValue,
    cryptoChanges,
    cryptoLogo,
    isAscending,
  } = props;
  return (
    <>
      <Card className="crypto-watch-card">
        <div className="px-4 ">
          <div className="d-flex align align-items-center justify-content-between mt-3">
            <div className="d-flex align-items-center ml-3">
              <div className="d-30 text-white d-flex align-items-center btn-pill justify-content-center rounded-pill mr-2 bg-first">
                <img src={cryptoLogo} alt="cryptoLogo" />
              </div>
              <div>
                <Typography
                  color="textPrimary"
                  variant="h6"
                  className="font-weight-bold font-size-lg"
                >
                  {cryptoName}
                </Typography>
                <Typography
                  color="primary"
                  variant="subtitle2"
                  className="crypto-symbol font-weight-bold"
                >
                  {cryptoSymbol}
                </Typography>
              </div>
            </div>
            <div>
              <Typography
                color="textPrimary"
                variant="subtitle2"
                className="info-icon cursor-pointer opacity-4"
              >
                <ErrorOutlineIcon />
              </Typography>
            </div>
          </div>

          <div className="mt-3">
            <Chart
              options={ethChartOptions}
              series={ethChartData}
              type="line"
              height={100}
            />
          </div>
          <div className="d-flex mb-2 justify-content-between align-items-center">
            <div className="d-flex align-items-center">
              <Typography
                variant="subtitle2"
                color="textPrimary"
                className="font-weight-bold font-size-xl mb-2 ml-4"
              >
                ${cryptoValue}
              </Typography>
            </div>
            <div
              className={`d-flex align-items-center mb-2 mr-2  ${
                isAscending ? "text-success" : "text-danger"
              }`}
            >
              {isAscending ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />}
              <div className="font-size-lg ">{cryptoChanges}</div>
            </div>
          </div>
        </div>
      </Card>
    </>
  );
};

export default CrptoWatchBox;
